<template>
  <div class="hobby">
    <div class="hobby-title">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">猜你喜欢
    </div>
    <ul class="hobby-list">
      <li class="hobby-item" v-for="item in hobbyList" :key="item.id">
        <img :src="item.imgUrl" :alt="item.title">
        <!-- <span v-if="item.tag" :class="item.tag == '可订今日'?'tag2':'tag1'">{{ item.tag }}</span> -->
        <div class="content">
          <p class="title">{{ item.title }}</p>
          <p class="ratings">{{ item.ratings }}条评论</p>
          <p class="price"><span>￥<strong>{{ item.price }}</strong></span>起</p>
          <p class="area">{{ item.area }}</p>
          <p class="mark" v-if="item.mark">{{ item.mark }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hobbyList: [
        {
          id: '001',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1606/d2/d25becf22ed8c26ee2.water.jpg_200x200_b726528e.jpg',
          title: '华清宫',
          tag: '可订今日',
          ratings: 823,
          price: 128,
          area: '临潼区',
          mark: '探寻杨贵妃御汤遗址'
        },
        {
          id: '0012',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1606/d2/d25becf22ed8c26ee2.water.jpg_200x200_b726528e.jpg',
          title: '华清宫',
          tag: '随买随用',
          ratings: 823,
          price: 128,
          area: '临潼区'
        },
        {
          id: '0011',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1606/d2/d25becf22ed8c26ee2.water.jpg_200x200_b726528e.jpg',
          title: '华清宫',
          ratings: 823,
          price: 128,
          area: '临潼区',
          mark: '探寻杨贵妃御汤遗址'
        },
        {
          id: '002',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1606/d2/d25becf22ed8c26ee2.water.jpg_200x200_b726528e.jpg',
          title: '华清宫',
          tag: '可订明日',
          ratings: 823,
          price: 128,
          area: '临潼区'
        },
        {
          id: '003',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1606/d2/d25becf22ed8c26ee2.water.jpg_200x200_b726528e.jpg',
          title: '华清宫',
          ratings: 823,
          price: 128,
          area: '临潼区'
        },
        {
          id: '004',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1411/9d/d74294e6031d93218b9ccfa621926d25.water.jpg_200x200_bb991fa2.jpg',
          title: '华清宫',
          ratings: 823,
          price: 128,
          area: '临潼区',
          mark: '探寻杨贵妃御汤遗址'
        },
        {
          id: '005',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1606/d2/d25becf22ed8c26ee2.water.jpg_200x200_b726528e.jpg',
          title: '华清宫',
          ratings: 823,
          price: 128,
          area: '临潼区',
          mark: '探寻杨贵妃御汤遗址'
        },
        {
          id: '006',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1606/d2/d25becf22ed8c26ee2.water.jpg_200x200_b726528e.jpg',
          title: '华清宫',
          ratings: 823,
          price: 128,
          area: '临潼区',
          mark: '探寻杨贵妃御汤遗址'
        },
        {
          id: '007',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1606/d2/d25becf22ed8c26ee2.water.jpg_200x200_b726528e.jpg',
          title: '华清宫',
          ratings: 823,
          price: 128,
          area: '临潼区',
          mark: '探寻杨贵妃御汤遗址'
        },
        {
          id: '008',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1411/9d/d74294e6031d93218b9ccfa621926d25.water.jpg_200x200_bb991fa2.jpg',
          title: '华清宫',
          ratings: 823,
          price: 128,
          area: '临潼区',
          mark: '探寻杨贵妃御汤遗址'
        }
      ]
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "~@/assets/css/common.styl"
  .tag1 {
    $hobby-tag (#ffa71b);
  }
  .tag2 {
    $hobby-tag (#0bd5ef);
  }
  .hobby {
    margin-top: .2rem;
    background-color: #fff;
    padding: 0 .2rem;
  }
  .hobby-title {
    line-height: .9rem;
    font-size: .32rem;
  }
  .hobby-title img {
    width: .3rem;
    height: .3rem;
  }
  .hobby-item {
    font-size: .24rem;
    padding: .2rem 0;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
  }
  .hobby-item img {
    width: 2rem;
    height: 2rem;
    float: left;
    margin-right: .2rem;
  }
  .hobby-item>span {
    color: #f0f;
  }
  .hobby-item .content {
    float: left;
  }
  .area {
    position: relative;
    top: 0px;
    right: -210px;
  }
  .title {
    margin-top: .26rem;
    height: .44rem;
    color: #212121;
    font-size: .32rem;
    line-height: .44rem;
  }
  .ratings {
    color: #616161;
    font-size: .24rem;
    line-height: .34rem;
    vertical-align: text-bottom;
    margin-left: 1rem;
  }
  .price span{
    font-size: .4rem;
    line-height: .4rem;
    color: #ff8300;
  }
</style>
